<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>比较定位模式:</title>
    <style>
        body{
            display: block;font-size:12px;line-height: 200%;
            width:400px;height:400px;
        }
        p{display:block}
        span{display:inline}
    </style>

</head>
<body>
<header>比较定位模式:常规流(normal flow)、浮动(float)、绝对定位(absolute positioning)</header>
<P style="float:left;width:400px;">Beginning of body contents.
    <span id="outer"> Start of outer contents.
    <span id="inner"> Inner contents.</span>
    End of outer contents.</span>
    End of body contents.
</P>
<P >Beginning of body contents.
    <span id="outer"> Start of outer contents.
    <span id="inner"> Inner contents.</span>
    End of outer contents.</span>
    End of body contents.
dfgh dsfgh</P>


<p style="display:inline-block;margin:0;background-color: #00aaff;padding:72px 0;vertical-align:top;line-height: 100%;font-size: 36px;width:200px;"
        >adfad Beginning</p>
<p style="margin:0;background-color: #00baff;line-height: 300%;font-size: 36px;float:left;width:200px;"
        >contents</p>
<p style="margin:0;background-color: #00daff;line-height: 300%;font-size: 36px;float:left;width:200px;"
        >contents</p>

</body>
</html>